<template>
  <div style="height: 100%; width: 100%">
    <div :id="id" style="height: 100%; width: 100%" class="higBox"></div>
    <div v-if="bgBol" class="bg"></div>
  </div>
</template>
<script>
import highcharts from "highcharts";
import { fontChart } from "@/utils/echartPxToRem";
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    dataList: {
      type: Array,
      default: () => ([
        {
          name: "XXX区",
          y: 10254,
          h: 0,
          bfb: 0,
          
        },
        {
          name: "XXX区",
          y: 6894,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 7667,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 4287,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 8687,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 16112,
          h: 0,
          bfb: 0
        }
      ])
    },
    bgBol: {
      type: Boolean,
      default: false
    },
    color1: {
      type: Array,
      default: [
        "#8FDFFE",
        "#42BC92",
        "#00A8FF",
        "#00D7E9",
        "#42BC92",
        "#00A8FF",
        "#42BC92",
      ]
    },
    color2: {
      type: Array,
      default: [
        "#00A8FF",
        "#7DE2BF",
        "#8FDFFE",
        "#00D7E9",
        "#42BC92",
        "#00A8FF",
        "#7DE2BF",
      ]
    },
    innerSize: {
      type: Number,
      default: 95
    },
    h: {
      type: Number,
      default: 1.5
    }
  },
  watch: {
    dataList() {
      this.$nextTick(() => {
        this.initOption();
      });
    },
  },
  mounted() {
    // this.$nextTick(() => {
    this.initOption();
    // });
    window.addEventListener("resize", this.initOption);
  },
  destroyed() {
    window.removeEventListener("resize", this.initOption);
  },
  methods: {
    initOption() {
      let quantity = 0; // 总数
      this.dataList.forEach((item) => {
        quantity += item.y;
      });
      this.dataList.forEach((item, index) => {
        item.bfb = parseInt((item.y / quantity) * 100);
        item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * this.h
        if (index == 0) {
          // item.bfb = 100
          // item.h = 100
        }
        // console.log(item)
        // item.h = parseInt(0.86 * item.bfb); // 最高高度60，根据比例渲染高度
        // console.log(this.dataList, "dataList----->>>");
      });
      // 修改3d饼图绘制过程
      var each = highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      highcharts.wrap(
        highcharts.seriesTypes.pie.prototype,
        "translate",
        function (proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          if (!this.chart.is3d()) {
            return;
          }
          var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking
              ? (seriesOptions.stack || 0) * depth
              : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function (point) {
            var shapeArgs = point.shapeArgs,
              angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
            };
          });
        }
      );
      (function (H) {
        H.wrap(
          highcharts.SVGRenderer.prototype,
          "arc3dPath",
          function (proceed) {
            // Run original proceed method
            var ret = proceed.apply(this, [].slice.call(arguments, 1));
            ret.zTop = (ret.zOut + 0.5) / 100;
            return ret;
          }
        );
      })(highcharts);
      let that = this
      highcharts.getOptions().colors = highcharts.map(
        highcharts.getOptions().colors,
        function (color, index) {
          return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
              [0, that.color2[index]],
              [0.2, that.color2[index]],
              [1, that.color1[index]], // darken
            ],
          };
        }
      );
      // 高度 渐变 透明度 间隙 指示线 文字
      highcharts.chart(this.id, {
        chart: {
          animation: false,
          backgroundColor: "none",
          type: "pie", //饼图
          margin: [0, 0, 0, 0],
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
          events: {
            load: function () {
              var each = highcharts.each,
                points = this.series[0].points;
              each(points, function (p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran,
                });
              });
            },
          },
        },
        legend: {
          enabled: true, // 关闭图例
          align: "center", //水平方向位置
          verticalAlign: "top", //垂直方向位置
          layout: "horizontal",
          x: fontChart(-20),
          y: fontChart(30),
          symbolWidth: fontChart(10),
          symbolHeight: fontChart(10),
          symbolRadius: "50%", // 修改成圆
          itemMarginBottom: fontChart(8),
          useHTML: true,
          //labelFormat: '{name}&nbsp;&nbsp;&nbsp;&nbsp;{y}',
          labelFormatter: function () {
            return (
              '<div style="width: .3125rem;display: inline-block">' +
              this.name +
              ':&nbsp;&nbsp;</div><div style="color: #00d7da;display: inline-block">' +
              this.y +
              "</div>"
            );
          },
          itemStyle: {
            color: "#f4f4f6",
            fontSize: fontChart(12),
          },
        },
        title: {
          // enabled: false,
          text: "",
        },
        subtitle: {
          text: "",
        },
        plotOptions: {
          pie: {
            allowPointSelect: false, // 禁用点击
            cursor: "pointer",
            depth: fontChart(15),
            showInLegend: false,
            size: "75%", // 外圈直径大小
            innerSize: fontChart(this.innerSize), // 内圈直径大小
            dataLabels: {
              enabled: true,
              alignTo: "toPlotEdges",
              y: -20,
              // 这里是标签的引导线
              connectorShape: function (
                labelPosition,
                connectorPosition,
                options
              ) {
                var touchingSliceAt = connectorPosition.touchingSliceAt,
                  alignment = labelPosition.alignment,
                  left = 0,
                  right = 0;
                if (alignment == "left") {
                  left = labelPosition.x + this.dataLabel.bBox.width + 5;
                  right = labelPosition.x + 5;
                } else {
                  left = labelPosition.x - this.dataLabel.bBox.width - 10;
                  right = labelPosition.x - 10;
                }
                return [
                  "M",
                  left,
                  labelPosition.y,
                  "L",
                  right,
                  labelPosition.y,
                  "L",
                  touchingSliceAt.x,
                  touchingSliceAt.y,
                ];
              },
              useHTML: true,
              formatter: function (labelPosition) {
                return (`
                  <div>
                    <p style='margin-top: 0px; color: #41A6FC;text-align: center;'>${this.key}</p>
                    <p style='margin-top: 0px;text-align: center;'>${this.y}</p>
                  </div>`)
              },
              distance: 20,
              style: {
                color: "#FFFFFF",
                fontSize: "18px",
                textOutline: "none",
                fontWeight: "500",
              },
              // useHTML: true,
              // enabled: true, //是否显示饼图的线形tip
              // distance: 5,
              // borderColor: '#007acc',
              // align: "center",
              // // verticalAlign: 'top',
              // position: "right",
              // format: "{point.bfb}%",
              // // formatter: (point,b) => {
              // //   console.log(point,'ponit-->>')
              // //   console.log(b,'ponit-->>')
              // // },
              // color: "#ffffff",
              // style: {
              //   textOutline: "none",
              //   fontSize: fontChart(13),
              // },
            },
          },
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        series: [
          {
            type: "pie",
            name: "数量",
            data: this.dataList,
          },
        ],
      });
    },
  },
};
</script>
<style lang="less">
  .bg {
    z-index: 1;
    width: 70%;
    height: 70%;
    // margin-top: -37%;
    // margin-left: 18%;
    position: relative;
    background-image: url("@/assets/3Dbingtu_dizuo_bg.png");
    background-size: 100% 100%;
    // transform: rotatex(10deg);
    top: -76%;
    left: 15%
  }
  .higBox{
    position: relative;
    z-index: 2;
  }
</style>
